<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Techniques AJAX - XMLHttpRequest</title>
</head>

<body>
<form id="form">
			<select>
				<option value="choix">faites un choix</option>
				<option value="boire">boire</option>
				<option value="manger">manger</option>
			</select>
			<select style="display: none;">
				<option value="choix">faites un choix</option>
				<option value="alcool">alcool</option>
				<option value="sans-alcool">sans-alccol</option>
			</select>
			<select style="display: none;">
				<option value="choix">faites un choix</option>
				<option value="bierre">bierre</option>
				<option value="wisky">wisky</option>
				<option value="vodka">vodka</option>
			</select>
			<select style="display: none;">
				<option value="choix">faites un choix</option>
				<option value="coca">coca</option>
				<option value="perrier">perrier</option>
				<option value="orangina">orangina</option>
			</select>
			<select style="display: none;">
				<option value="choix">faites un choix</option>
				<option value="chauds">chauds</option>
				<option value="froids">froids</option>
			</select>
			<select style="display: none;">
				<option value="choix">faites un choix</option>
				<option value="lasagne">lasagne</option>
				<option value="boeuf">boeuf</option>
				<option value="legume">legume</option>
			</select>
			<select style="display: none;">
				<option value="choix">faites un choix</option>
				<option value="salade">salade</option>
				<option value="fromage">fromage</option>
			</select>
		</form>
		<script type="text/javascript">
			var form = document.getElementById("form");
			var sel = form.getElementsByTagName("select");
			sel[0].onchange = function() {
				if (this.value == "boire") {
					sel[1].style.display = "block";
					sel[2].style.display = "none";
					sel[3].style.display = "none";
					sel[4].style.display = "none";
					sel[5].style.display = "none";
					sel[6].style.display = "none";

				} else if (this.value == "manger") {
					sel[1].style.display = "none";
					sel[2].style.display = "none";
					sel[3].style.display = "none";
					sel[4].style.display = "block";
					sel[5].style.display = "none";
					sel[6].style.display = "none";

				} else {
					return false;
				}
			}
			sel[1].onchange = function() {
				if (this.value == "alcool") {
					sel[2].style.display = "block";
					sel[3].style.display = "none";
					sel[4].style.display = "none";
					sel[5].style.display = "none";
					sel[6].style.display = "none";

				} else if (this.value == "sans-alcool") {
					sel[2].style.display = "none";
					sel[3].style.display = "block";
					sel[4].style.display = "none";
					sel[5].style.display = "none";
					sel[6].style.display = "none";

				} else {
					return false;
				}
			}
			sel[4].onchange = function() {
				if (this.value == "chauds") {
					sel[2].style.display = "none";
					sel[3].style.display = "none";
					sel[1].style.display = "none";
					sel[5].style.display = "block";
					sel[6].style.display = "none";

				} else if (this.value == "froids") {
					sel[2].style.display = "none";
					sel[3].style.display = "none";
					sel[1].style.display = "none";
					sel[5].style.display = "none";
					sel[6].style.display = "block";

				} else {
					return false;
				}
			}
		</script>
</body>
</html>